<template>
  <transition
    name="input-transition"
    enter-active-class="animated slideInUp faster"
    leave-active-class="animated slideOutDown fast"
  >
    <div
      v-if="isShowModal"
      class="s-input-modal"
    >
      <div class="modal-header">
        <span
          @click="openFsEditor"
          class="fullMax"
        >{{ $t('m.weiyou_fullscreen') }}</span>
      </div>
      <full-screen-editor
        ref="editfsEditor"
        :contents="commentContent"
        @finishInput="finishInput"
      />
      <div
        id="comment-uEditor"
        style="height:320px"
      />
      <slot name="handleIconBtns" />
      <div class="sendBtn">
        <el-button
          @click.prevent.stop="handleSend"
          size="mini"
          type="primary"
        >
          {{ $t('m.weiyou_send1') }}
        </el-button>
        <el-button
          @click.prevent.stop=" isShowModal = false "
          size="mini"
        >
          {{ $t('m.weiyou_cancel') }}
        </el-button>
      </div>
    </div>
  </transition>
</template>

<script>
import FullScreenEditor from '../fullscreenEditor/fullscreenEditor';
import returnMsg from '../../modules/microMail/assets/lang/speNationalList';
import getMaxZindex from '../../modules/microMail/util/getZindex';

export default {
  name: 'InputModal',
  components: {
    FullScreenEditor,
  },
  data() {
    return {
      isShowModal: false,
      commentContent: '',
      commentEditor: null,
    };
  },
  watch: {
    isShowModal(nv) {
      if (nv) {
        this.commentContent = '';
        this.initUeditor();
      } else {
        this.commentEditor && this.commentEditor.destroy();
      }
    },
  },
  mounted() {
    /* document.addEventListener('click', (e) => {
      console.log('e', e);
      const dom = document.getElementsByClassName('s-input-modal')[0];
      // const dom1 = document.getElementsByClassName('x-window')[0];
      // const dom2 = document.getElementsByClassName('mu-popover')[0];
      // const dom3 = document.getElementById('fsEditorDialog');
      if ((dom && dom.contains(e.target))) return;
      this.isShowModal = false;
    }); */
  },
  methods: {
    // 初始化富文本编辑器
    initUeditor() {
      // 富文本编辑器
      const editorCfg = {
        autoHeightEnabled: false,
        enableAutoSave: false,
        allowDivTransToP: false, // 阻止div标签自动转换为p标签
        toolbars: [[
          'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'forecolor', 'backcolor', 'fontfamily', 'fontsize', '|',
          'insertorderedlist', 'insertunorderedlist', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
        ]],
        // 关闭字数统计
        wordCount: false,
        maximumWords: 100000000000000,
        // 关闭elementPath
        elementPathEnabled: false,
      };
      const dsq = setInterval(() => {
        this.commentEditor = UE.getEditor('comment-uEditor', editorCfg);
        if (this.commentEditor) {
          this.commentEditor.ready(() => {
            // 处理编辑器toolbar下拉选择  被遮挡的问题
            $('#comment-uEditor .edui-editor').css({ 'z-index': getMaxZindex() + 1 });
            this.commentEditor.focus();
          });
          // 内容改变
          this.commentEditor.addListener('contentChange', () => {
            this.commentContent = this.commentEditor.getContent();
          });
          clearInterval(dsq);
        }
      }, 50);
    },
    // 打开全屏
    openFsEditor() {
      this.$refs.editfsEditor.fullscreenVisible = true;
    },
    // 全屏编辑结束
    finishInput(cnt) {
      // 桌面端图片链接处理
      const contents = JE.buildUeditorImgUrl(cnt);
      this.commentEditor && this.commentEditor.setContent(contents);
    },
    // 点击发送
    handleSend() {
      if (this.commentEditor && !this.commentEditor.getContent().trim()) {
        this.$message({
          message: returnMsg('评论或者回复内容不能为空，请输入!'),
          type: 'warning',
          duration: 1500,
        });
        return false;
      }
      this.$emit('sendComment', this.commentEditor && this.commentEditor.getContent());
    },
  },
};
</script>
<style lang="scss">
@import "./animate/animate.min.css";
.s-input-modal {
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  top: auto;
  background-color: #fff;
  box-shadow: 0px -6px 14px 5px rgba(0, 0, 0, 0.15);
  border-radius: 7px;
  padding: 10px 20px;
  z-index: 100001;
  .modal-header {
    color: #b0b0b0;
    font-size: 14px;
    text-align: right;
    margin-bottom: 10px;
    .fullMax {
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
  }
  .uploadTip {
    padding-top: 10px;
    font-size: 12px;
  }
  .el-row {
    margin-bottom: 20px;
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      height: 36px;
      background-color: #fafbfc;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .slImg {
        width: 36px;
        height: 100%;
        font-size: 24px;
      }
      .fileName {
        width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 26px;
        line-height: 26px;
        border-right: 1px solid #e6e8eb;
        padding-left: 5px;
      }
      .deleteIcon {
        flex: 1;
        text-align: center;
        cursor: pointer;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
